<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/css/right.css" rel="stylesheet">
    <script src="assets/jquery-3.5.1.min.js"></script>
    <script src="assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script src="assets/vue.min-v2.5.16.js"></script>
    <script src="assets/vue-router.min-2.7.0.js"></script>
    <script src="assets/axios.min.js"></script>
    <script src="assets/date_picker.js"></script>
</head>
<body>
<div id="app" class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="row">
                <div class="col-md-12" style="text-align: center; font-weight: bold; font-size: 18px; height: 80px; line-height: 80px;">
                    添加抄表记录
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 col-md-offset-3" style="height: 80px;">
                    <label>门牌号</label>
                    <select v-model="houseId" class="form-control">
                        <option value="null">请选择门牌号</option>
                        <option v-for="h in houseList" :value="h.id">{{h.numbers}}</option>
                    </select>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 col-md-offset-3" style="height: 80px;">
                    <label>费用类型</label>
                    <select v-model="typeId" class="form-control">
                        <option value="null">请选择费用类型</option>
                        <option v-for="t in typeList" :value="t.id">{{t.name}}</option>
                    </select>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 col-md-offset-3" style="height: 80px;">
                    <label>上次度数</label>
                    <input type="text" class="form-control" v-model="num"/>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 col-md-offset-3" style="height: 80px;">
                    <label>本次度数</label>
                    <input type="text" class="form-control" v-model="num2"/>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 col-md-offset-3" style="height: 80px;">
                    <label>登记时间</label>
                    <input type="datetime-local" class="form-control" v-model="checkDate">
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 col-md-offset-3" style="height: 80px;">
                    <label>抄表员</label>
                    <input type="text" class="form-control" v-model="meter"/>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6 col-md-offset-3" style="height: 80px;">
                    <button class="btn btn-primary" @click="doSave">保存</button>
                    <button class="btn btn-default" @click="doBack">取消</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            //绑定双表集合
            houseList:null,
            typeList:null,
            //页面数据
            houseId: null,
            typeId: null,
            checkDate: null,
            num:null,
            num2:null,
            meter:null
        },
        methods: {
            //点击保存按钮执行
            doSave(){
                var uid = localStorage.getItem("uid");
                axios.post("http://localhost:8080/records/add?uid="+uid,{
                    typeId: this.typeId,
                    num: this.num,
                    num2: this.num2,
                    houseId: this.houseId,
                    checkTime: this.checkDate,
                    meter: this.meter
                
                }).then(response=>{
                    if (response.data.code == 200){
                        window.parent.main_right.location.href="records_list.html";
                    }else{
                        alert(response.data.msg)
                    }
                })

            },
            //请求收费类型列表
            requestTypeList() {
                var uid = localStorage.getItem("uid");
                axios.get("http://localhost:8080/proType/list?uid="+uid).then(response =>{
                    console.log(response.data);
                    this.typeList = response.data.data;
                })
            },
            //请求房屋列表
            requestHouseList(){
                var uid = localStorage.getItem("uid");
                axios.get("http://localhost:8080/house/list?pageIndex=1&pageSize=100&uid="+uid).then(response =>{
                    console.log(response.data);
                    this.houseList=response.data.data;
                })
            },

           //点击取消按钮,返回上级界面
            doBack(){
                history.go(-1);
            }
        },
        created: function () {
            this.requestTypeList(); //调用收费类型列表函数
            this.requestHouseList(); //调用房屋列表函数

        }

    });
</script>
</body>
</html>